<template>
	<div class="wrapper">
		<!-- header -->
		<header class="header">
			<p>用户信息</p>
		</header>
		
		<!-- 主要内容区域 -->
		<div class="main-content">
			<!-- 用户信息 -->
			<div class="user-card">
				<div class="avatar">
					<img src="../assets/default-avatar.png" alt="头像">
				</div>
				<div class="user-details">
					<div class="detail-item">
						<span class="label">用户ID：</span>
						<span class="value">{{ user.userId || '未设置' }}</span>
					</div>
					<div class="detail-item">
						<span class="label">用户名：</span>
						<span class="value">{{ user.userName || '未设置' }}</span>
					</div>
					<div class="detail-item">
						<span class="label">性别：</span>
						<span class="value">{{ getUserSex(user.userSex) }}</span>
					</div>
					<div class="detail-item">
						<span class="label">注册时间：</span>
						<span class="value">{{ user.createTime || '未知' }}</span>
					</div>
				</div>
			</div>
			
			<!-- 操作按钮 -->
			<div class="action-buttons">
				<button class="btn btn-primary" @click="editProfile">编辑资料</button>
				<button class="btn btn-logout" @click="logout">退出登录</button>
			</div>
		</div>
		
		<!-- 底部菜单 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	
	export default {
		name: 'UserInfo',
		data() {
			return {
				user: {}
			}
		},
		created() {
			this.user = this.$getSessionStorage('user') || {};
		},
		components: {
			Footer
		},
		methods: {
			getUserSex(sex) {
				switch(sex) {
					case 1: return '男';
					case 0: return '女';
					default: return '未设置';
				}
			},
			editProfile() {
				alert('假的没做');
			},
			logout() {
				this.$removeSessionStorage('user');
				alert('已退出登录！');
				this.$router.push({path: '/login'});
			}
		}
	}
</script>

<style scoped>
	/* 整体布局 */
	.wrapper {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	/* 顶部标题栏 */
	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 4.8vw;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}
	
	/* 主要内容区域 */
	.main-content {
		padding-top: 12vw;
		padding-bottom: 18vw; /* 给footer留出空间 */
		padding: 12vw 4vw 18vw 4vw;
	}
	
	/* 用户卡片 */
	.user-card {
		background: white;
		border-radius: 2vw;
		padding: 6vw;
		margin-bottom: 4vw;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}
	
	/* 头像 */
	.avatar {
		text-align: center;
		margin-bottom: 4vw;
	}
	
	.avatar img {
		width: 20vw;
		height: 20vw;
		border-radius: 50%;
		border: 3px solid #e0e0e0;
		object-fit: cover;
	}
	
	/* 用户详情 */
	.detail-item {
		display: flex;
		align-items: center;
		padding: 3vw 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.detail-item:last-child {
		border-bottom: none;
	}
	
	.detail-item .label {
		width: 25vw;
		font-size: 3.5vw;
		color: #666;
		font-weight: 600;
	}
	
	.detail-item .value {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
	}
	
	/* 操作按钮 */
	.action-buttons {
		display: flex;
		flex-direction: column;
		gap: 3vw;
	}
	
	.btn {
		width: 100%;
		height: 10vw;
		border: none;
		border-radius: 2vw;
		font-size: 3.8vw;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.btn-primary {
		background-color: #0097FF;
		color: white;
	}
	
	.btn-primary:hover {
		background-color: #0080dd;
	}
	
	.btn-logout {
		background-color: #f5f5f5;
		color: #666;
		border: 1px solid #ddd;
	}
	
	.btn-logout:hover {
		background-color: #e0e0e0;
	}
</style>
